<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <a-row span="24" style="padding: 10px 6%;">
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">产品名称：<span>*</span></div>
        <a-input v-model:value="formData.name" placeholder="请输入产品名称" allow-clear />
        <div class="wxts" v-if="errmsg.indexOf('name') > -1">请输入产品名称!</div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">种类：</div>
        <JTreeSelect v-model:value="formData.category" dict="t_classification,name,id" pidField="pid"
          pidValue="1690901276535795713" hasChildField="has_child"></JTreeSelect>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">品种：</div>
        <a-input v-model:value="formData.variety" placeholder="请输入品种" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">产地：</div>
        <a-input v-model:value="formData.origin" placeholder="请输入产地" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">生产者：</div>
        <a-input v-model:value="formData.producer" placeholder="请输入生产者" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">生产者地址：</div>
        <a-input v-model:value="formData.producerAddress" placeholder="请输入生产者地址" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">品牌：</div>
        <a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">质量等级：</div>
        <a-input v-model:value="formData.qualityGrade" placeholder="请输入质量等级" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">产品标准代码：</div>
        <a-input v-model:value="formData.standardCode" placeholder="请输入产品标准代码" allow-clear />
      </a-col>
      <a-col class="tc_item" span="24">
        <div class="tc_item_tit">种植标准：</div>
        <a-textarea v-model:value="formData.standard" placeholder="请输入种植标准" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">logo：</div>
        <div class="clearfix">
          <JImageUpload v-model:value="formData.logo" bizPath="null" fileMax="10" :multiple="true"></JImageUpload>
        </div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">农产品图片：</div>
        <div class="clearfix">
          <JImageUpload v-model:value="formData.productImage" bizPath="null" fileMax="10" :multiple="true">
          </JImageUpload>
        </div>
      </a-col>

      <a-col class="tc_item" span="24">
        <div class="tc_item_tit">产品介绍：</div>
        <JEditor v-model:value="formData.intro"></JEditor>
      </a-col>
      <a-col class="tc_item" span="24">
        <div class="tc_item_tit">宣传资料：</div>
        <JEditor v-model:value="formData.introduce"></JEditor>
      </a-col>
    </a-row>
    <!-- <BasicForm @register="registerForm"/> -->
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, onUnmounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
// import {BasicForm, useForm} from '/@/components/Form/index';
// import {formSchema} from '../TProduct.data';
import { saveOrUpdate } from '../TProduct.api';
import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue'
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue'
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue'

// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);
//表单配置
// const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
//     //labelWidth: 150,
//     schemas: formSchema,
//     showActionButtonGroup: false,
//     baseColProps: {span: 24}
// });

onUnmounted(() => {
  resetFields()
})

const formData = ref({
  no: '',
  name: '',
  logo: '',
  category: '',
  standard: '',
  variety: '',
  origin: '',
  producer: '',
  producerAddress: '',
  brand: '',
  qualityGrade: '',
  standardCode: '',
  productImage: '',
  intro: '',
  introduce: ''
})

const resetFields = () => {
  Object.keys(formData.value).map(key => {
    formData.value[key] = ''
  })
}

const setFieldsValue = (data) => {
  console.log(data)
  Object.keys(formData.value).map(key => {
    if (data.hasOwnProperty(key)) {
      formData.value[key] = data[key]
    }
  })
}

const getFieldsValue = () => {
  return formData.value;
}

const errmsg = ref([])

const validateFields = (data: PropertyKey[]) => {
  return new Promise<void>(function (resolve, reject) {
    errmsg.value = [];
    data.map((field: string) => {
      if (formData.value.hasOwnProperty(field) && formData.value[field] == '') {
        errmsg.value.push(field)
      }
    })
    if (errmsg.value.length) {
      reject(false);
    } else {
      resolve();
    }
  })
}

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  resetFields();
  setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    //表单赋值
    setFieldsValue({
      ...data.record,
    });
  }
  // 隐藏底部时禁用整个表单
  // setProps({ disabled: !data?.showFooter })
});
//设置标题
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
//表单提交事件
async function handleSubmit(v) {
  try {
    await validateFields(['name']);
    let values = getFieldsValue();
    setModalProps({ confirmLoading: true });
    //提交表单
    await saveOrUpdate(values, isUpdate.value);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
};
</script>

<style lang="less" scoped>
.tc_item .ant-upload-list-picture-card-container {
  width: 97px !important;
  height: 97px !important;
}

.tc_item .ant-upload-select-picture-card {
  width: 97px !important;
  height: 97px !important;
}

.jdmj_dw {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 32px;
  line-height: 32px;
  width: 48px;
  text-align: center;
  color: #000 !important;
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.wxts {
  color: #ED6F6F;
  margin-left: 10px;
  font-size: 12px;
  margin-top: 10px;
}

.tc_item {
  margin-bottom: 22px;
  padding: 0px 10px;

  &_tit {
    padding-bottom: 10px;
  }

  span {
    color: #FF4D4F;
  }
}

/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}

:deep(.ant-input-affix-wrapper-textarea-with-clear-btn textarea.ant-input) {
  padding: 4px 11px;
}
</style>
